@charset "utf-8";

@import "reset";
@import "common";

@function vw($px) {
  @return $px/750px * 100 * 1vw;
}

.web {
  header {
    position: absolute;
    width: 100%;
    background: white;
    top: 0;
    left: 0;
    .psifl {
      width: vw(706px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(48px) 0 vw(20px);
      a {
        .button_box {
          width: vw(124px);
          height: vw(58px);
          color: black;
          font-size: vw(26px);
          text-align: center;
          line-height: vw(58px);
          border-radius: vw(29px);
          box-sizing: border-box;
          border: vw(1px) solid $index_color;
        }
      }
      .search_box {
        font-size: vw(26px);
        font-weight: bold;
      }
      .city_box {
          margin-top: vw(-12px);
        i{
            color: $index_color;
            font-size: vw(60px);
        }
        &::after{
            content: "2";
            display: inline-block;
            width: vw(28px);
            height: vw(28px);
            border-radius: vw(14px);
            background: red;
            color: white;
            text-align: center;
            line-height: vw(28px);
            font-size:vw(20px);
          position: absolute;
          top: vw(42px);
          left: 93%;
        }
      }
    }
  }
  section {
    width: 100%;
    position: absolute;
    top: vw(124px);
    bottom: vw(126px);
    overflow-y: auto;
    .log_in{
        width: vw(709px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .login_tx{
            width: vw(170px);
            height: vw(170px);
            border-radius: vw(85px);
            overflow: hidden;
            img{
                width: 100% ;
            }
        }
        .login_djdl{
            width: vw(445px);
            p{
                font-size: vw(30px);
                margin: vw(32px) 0;
                color: black;
            }
            span{
                font-size: vw(26px);
                color: #9d9d9d;
            }
        }
        .login_jt{
            font-size: vw(60px);
            width: vw(44px);
            align-self: center;
            font-weight: bold;
            i{
                color: black;
            }
        }
    }
    .my_fc{
        width: vw(709px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: vw(28px) 0;
        li{
            width: vw(194px);
            height: vw(150px);
            text-align: center;
            span{
                font-size: vw(26px);
            }
        }
        .tuk1{
            background: #b2e0a0;
            div{
                width: vw(78px);
                height: vw(82px);
                overflow: hidden;
                margin: vw(20px) auto vw(4px);
                img{
                    width: 100%;
                }
            }
        }
        .tuk2{
            background: #a0dce0;
            div{
                width: vw(83px);
                height: vw(82px);
                overflow: hidden;
                margin: vw(20px) auto vw(4px);
                img{
                    width: 100%;
                }
            }
        }
        .tuk3{
            background: #e0b7a0;
            div{
                width: vw(124px);
                height: vw(82px);
                overflow: hidden;
                margin: vw(20px) auto vw(4px);
                img{
                    width: 100%;
                }
            }
        }
    }
    .subtitle {
        width: vw(709px);
        height: vw(90px);
        margin: vw(26px) auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .subtitle_left {
          display: flex;
         .div12 {
             width: vw(90px);
             height: vw(90px);
             overflow: hidden;
           img{
                width: 100%;
           }
          }
          span {
            font-size: vw(30px);
            align-self: center;
            margin-left: vw(10px);
          }
        }
        a {
          .subtitle_right {
            margin-top: vw(-70px);
            span {
              font-size: vw(24px);
              color: black;
            }
            i {
              display: inline-block;
              width: vw(25px);
              height: vw(25px);
              border: 1px solid $index_color;
              border-radius: 50%;
              color: $index_color;
              font-size: vw(20px);
              text-align: center;
              line-height: vw(25px);
            }
          }
        }
      }
      .button_td{
          width: vw(520px);
          margin: 0 auto vw(20px);
          display: flex;
          justify-content: space-between;
          button{
              width: vw(145px);
              height: vw(76px);
              color: white;
              border: none;
              outline: none;
              background: $index_color;
              border-radius: vw(38px);
          }
      }
  }
}
